<template>
  <!-- 轮播配置页面 -->
  <div>
    <!-- 头部添加按钮 -->
    <div class="header">
      <el-form :inline="true" class="demo-form-inline">
        <el-button type="primary" @click="toAdd">添加</el-button>
      </el-form>
    </div>
    <!-- 第二行轮播图内容展示 -->
    <el-table :data="columns" style="width: 100%">
      <el-table-column type="index" :index="1" label="序号" width="100" />
      <el-table-column prop="name" label="轮播图名称" />
      <el-table-column prop="introduce" label="轮播图描述" />
      <el-table-column prop="url" label="轮播图图片">
        <template slot-scope="scope">
          <el-popover placement="right" trigger="hover">
            <img
              slot="reference"
              :src="scope.row.url"
              width="30px"
              alt="加载失败"
            />
            <img width="150px" :src="scope.row.url" alt="" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '正常'" type="success"
            >正常</el-tag
          >
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="toEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" plain @click.prevent="todelete(scope.row.id)"
            >删除</el-button
          >
          <el-button
            v-if="scope.row.status === '正常'"
            type="info"
            plain
            @click.prevent="changeStatus(scope.row, '停用')"
            >停用</el-button
          >
          <el-button
            v-else
            type="success"
            plain
            @click.prevent="changeStatus(scope.row, '正常')"
            >启用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 轮播图内容结束 -->

    <!-- 添加与编辑的模态框部分 -->
    <el-dialog :title="title" :visible.sync="visible" @close="toClose">
      <el-form ref="myForm" :rules="rules" :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <!-- 封面 -->
        <el-form-item label="轮播图片" :label-width="formLabelWidth" prop="url">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="产品描述" :label-width="formLabelWidth">
          <el-input v-model="form.introduce" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toClose">取 消</el-button>
        <el-button type="primary" @click="toSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加与编辑的模态框部分完成 -->
  </div>
</template>

<script>
import { deletecarousel, saveOrUpdate, findallcarousel } from "@/api/carousel";
import { uploadFileURL } from "@/utils/config";
export default {
  data() {
    return {
      total: 0,
      // params:{
      //   page:1,
      //   pageSize:10,
      // },
      // 轮播图数据
      columns: [],
      // 控制模态框是否弹出
      visible: false,
      // 模态框标题
      title: "",
      // 表单对象
      form: {},
      formLabelWidth: "100px",
      // 头像上传图片变量
      imageUrl: "",
      // 图片上传地址
      uploadFileURL,
      rules: {
        name: [
          { required: true, message: "请输入轮播图名称", trigger: "blur" },
        ],
        url: [{ required: true, message: "请上传轮播图", trigger: "change" }],
      },
    };
  },
  methods: {
    // 更改状态
    async changeStatus(row, status) {
      if (status === "停用") {
        row.status = "停用";
      } else {
        row.status = "正常";
      }
      // console.log(row)
      const res = await saveOrUpdate(row);
    },

    toSubmit() {
      this.$refs.myForm.validate(async (valid) => {
        if (valid) {
          const res = await saveOrUpdate(this.form);
          this.$notify({
            type: "success",
            message: res.message,
          });
          this.toClose();
          this.findallcarousel();
        } else {
          return false;
        }
      });
    },
    // 添加按钮
    toAdd() {
      this.visible = true;
      this.title = "新增轮播图";
      this.form = {};
      this.imageUrl = "";
    },
    // 删除按钮
    todelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deletecarousel({ id });
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: res.message,
            });
            this.toClose();
            this.findallcarousel();
          } else {
            this.$message({
              type: "info",
              message: res.message,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 模态框关闭按钮
    toClose() {
      this.$refs.myForm.resetFields();
      this.visible = false;
    },
    // 图片上传成功的回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.url = res.data;
    },
    // 图片上传之前的回调
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 模态框编辑按钮
    toEdit(row) {
      this.title = "编辑轮播图";
      this.visible = true;
      this.form = { ...row };
      this.imageUrl = this.form.url;
    },
    async findallcarousel() {
      const res = await findallcarousel();
      // console.log(res,'轮播图数据');
      this.columns = res.data;
    },
  },
  created() {
    this.findallcarousel();
  },
  mounted() {},
};
</script>
<style scoped>
</style>